<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section">
        <ul class="rs-triangle">
          <li class="top"></li>
          <li class="right"></li>
          <li class="bottom"></li>
          <li class="left"></li>
          <li class="top-left"></li>
          <li class="top-right"></li>
          <li class="bottom-left"></li>
          <li class="bottom-right"></li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
// rs-triangle三角
.rs-triangle {
  height: 100px;
  li {
    float: left;
    margin-right: 40px;
    width: 80px;
    height: 80px;
    background: #ccc;
    position: relative;
    &::before {
      position: absolute;
      content: "";
    }
  }
  .top {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid red;
      border-right: 40px solid transparent;
      border-left: 40px solid transparent;
    }
  }
  .right {
    &::before {
      top: 0px;
      left: 40px;
      border-top: 40px solid transparent;
      border-right: 40px solid green;
      border-bottom: 40px solid transparent;
    }
  }
  .bottom {
    &::before {
      top: 40px;
      left: 0px;
      border-right: 40px solid transparent;
      border-bottom: 40px solid blue;
      border-left: 40px solid transparent;
    }
  }
  .left {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-left: 40px solid yellow;
    }
  }
  .top-left {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid red;
      border-right: 40px solid transparent;
    }
  }
  .top-right {
    &::before {
      top: 0px;
      left: 40px;
      border-top: 40px solid green;
      border-left: 40px solid transparent;
    }
  }
  .bottom-left {
    &::before {
      top: 40px;
      left: 0px;
      border-bottom: 40px solid blue;
      border-right: 40px solid transparent;
    }
  }
  .bottom-right {
    &::before {
      top: 40px;
      left: 40px;
      border-bottom: 40px solid yellow;
      border-left: 40px solid transparent;
    }
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// rs-triangle三角
.rs-triangle {
  height: 100px;
  li {
    float: left;
    margin-right: 40px;
    width: 80px;
    height: 80px;
    background: #ccc;
    position: relative;
    &::before {
      position: absolute;
      content: "";
    }
  }
  .top {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid red;
      border-right: 40px solid transparent;
      border-left: 40px solid transparent;
    }
  }
  .right {
    &::before {
      top: 0px;
      left: 40px;
      border-top: 40px solid transparent;
      border-right: 40px solid green;
      border-bottom: 40px solid transparent;
    }
  }
  .bottom {
    &::before {
      top: 40px;
      left: 0px;
      border-right: 40px solid transparent;
      border-bottom: 40px solid blue;
      border-left: 40px solid transparent;
    }
  }
  .left {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      border-left: 40px solid yellow;
    }
  }
  .top-left {
    &::before {
      top: 0px;
      left: 0px;
      border-top: 40px solid red;
      border-right: 40px solid transparent;
    }
  }
  .top-right {
    &::before {
      top: 0px;
      left: 40px;
      border-top: 40px solid green;
      border-left: 40px solid transparent;
    }
  }
  .bottom-left {
    &::before {
      top: 40px;
      left: 0px;
      border-bottom: 40px solid blue;
      border-right: 40px solid transparent;
    }
  }
  .bottom-right {
    &::before {
      top: 40px;
      left: 40px;
      border-bottom: 40px solid yellow;
      border-left: 40px solid transparent;
    }
  }
}
</style>
